<template>
    <el-dialog
      v-model="createVisible"
      :title="operation == 'create' ? '添加服务' : '编辑服务'"
      @before-ok="createOk"
      @close="close(createRef)"
      width="700px"
      top="100px"
    >
      <div style="width: 600px">
        <el-form
          :model="createForm"
          ref="createRef"
          :rules="createRules"
          label-width="130px"
          size="default"
          v-loading="initLoading"
        >
          <el-form-item label="服务名称：" prop="server_name">
            <el-input
              v-model="createForm.server_name"
              placeholder="请输入服务名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="内容描述：" prop="desc">
            <el-input
              v-model="createForm.desc"
              type="textarea"
              placeholder="请输入内容描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="图标：" prop="icon">
            <upload-btn
              v-model="createForm.icon"
              width="40px"
              height="40px"
              count="1"
            ></upload-btn>
            <help hideIcon>建议尺寸100*100</help>
          </el-form-item>
          <el-form-item label="状态：" prop="status">
            <el-radio-group v-model="createForm.status">
              <el-radio :label="0">关闭</el-radio>
              <el-radio :label="1">开启</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="排序：" prop="sort">
            <el-input-number v-model="createForm.sort" :min="0" :max="10000" />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="flex center">
          <el-button @click="createVisible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(createRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script lang="ts">
  export default {
    name: "storeGoodsServerCreate",
  };
  </script>
  <script lang="ts" setup>
  import { ref, getCurrentInstance, nextTick, reactive } from "vue";
  import type { FormInstance } from "element-plus";
  import {
    createGoodsServer,
    updateGoodsServer,
    getGoodsServerDetail,
  } from "@/api/store/goods_server";
  import type { Result, ResultError } from "@/types";
  
  const {
    proxy: { $message, $utils },
  } = getCurrentInstance() as any;
  
  const emit = defineEmits(["success"]);
  
  const createVisible = ref<boolean>(false);
  
  const operation = ref<string>("create");
  
  const operationId = ref<number>(0);
  
  const createRef = ref<typeof FormInstance>();
  
  const btnLoading = ref<boolean>(false);
  
  const parentTree = ref<any>([]);
  
  const initLoading = ref<boolean>(true)
  
  const toInit = () => {
    if (!operationId.value) {
      initLoading.value = false
      return;
    }
    getGoodsServerDetail({ id: operationId.value })
      .then((res: Result) => {
        createForm.value.server_name = res.data.server_name;
        createForm.value.icon = res.data.icon;
        createForm.value.sort = res.data.sort;
        createForm.value.status = res.data.status.value;
        createForm.value.desc = res.data.desc;
        initLoading.value = false
      })
      .catch((err: ResultError) => {
        $utils.errorMsg(err);
      });
  };
  
  const createForm = ref({
    server_name: "",
    sort: 0,
    status: 1,
    icon: "",
    desc:''
  });
  const createRules: any = reactive({
    server_name: [{ required: true, message: "服务名称不能为空！" }],
    desc: [{ required: true, message: "服务内容描述！" }],
    icon: [{ required: true, message: "图标不能为空！" }],
  });
  
  const createOk = async (formEl: typeof FormInstance | undefined) => {
    if (!formEl) return;
    await formEl.validate((valid: any, fields: any) => {
      if (valid) {
        if (btnLoading.value) {
          return;
        }
        btnLoading.value = true;
        let operationApi: any = null;
        if (operation.value == "create") {
          operationApi = createGoodsServer(createForm.value);
        } else {
          operationApi = updateGoodsServer(
            Object.assign(
              {
                id: operationId.value,
              },
              createForm.value
            )
          );
        }
        operationApi
          .then((res: Result) => {
            $message.success(res.message);
            close(formEl);
            emit("success");
            btnLoading.value = false;
          })
          .catch((err: ResultError) => {
            $utils.errorMsg(err);
            btnLoading.value = false;
          });
      }
    });
  };
  
  const open = (id: number = 0) => {
    initLoading.value = true
    if (id != 0) {
      operation.value = "update";
      operationId.value = id;
    } else {
      operation.value = "create";
    }
    nextTick(() => {
      toInit();
    });
    createVisible.value = true;
  };
  
  const close = async (formEl: typeof FormInstance | undefined) => {
    if (formEl) {
      formEl.resetFields();
    }
    operationId.value = 0;
    createVisible.value = false;
  };
  
  defineExpose({ open });
  </script>